<template>
  <div>
    <div>
      <!--<button @click="goToPage(0,1)">第一页</button>-->
      <span class="page_pre_next" @click="goToPage(0,2)"><</span>
      <!--<span v-for="page in pages" class="pagenum" :class="{page_selected: selected_page==page}"-->
      <!--@click="goToPage(1,page)"-->
      <!--&gt;{{ page }}</span>-->
      <ul>
        <li :class="{page_selected: selected_page==1}" @click="goToPage(1,1)">1</li>
        <li v-if="currentPage-4>1">...</li>
        <li v-if="currentPage-3>1" :class="{page_selected: selected_page==currentPage-3}"
            @click="goToPage(1,currentPage-3)">{{currentPage-3}}
        </li>
        <li v-if="currentPage-2>1" :class="{page_selected: selected_page==currentPage-2}"
            @click="goToPage(1,currentPage-2)">{{currentPage-2}}
        </li>
        <li v-if="currentPage-1>1" :class="{page_selected: selected_page==currentPage-1}"
            @click="goToPage(1,currentPage-1)">{{currentPage-1}}
        </li>
        <li :class="{page_selected: selected_page==currentPage}" @click="goToPage(1,currentPage)"
            v-if="currentPage!=1 && currentPage!=length" class="ddddd">{{currentPage}}
        </li>
        <li v-if="currentPage+1<length" :class="{page_selected: selected_page==currentPage+1}"
            @click="goToPage(1,currentPage+1)">
          {{currentPage+1}}
        </li>
        <li v-if="currentPage+2<length" :class="{page_selected: selected_page==currentPage+2}"
            @click="goToPage(1,currentPage+2)">
          {{currentPage+2}}
        </li>
        <li v-if="currentPage+3<length" :class="{page_selected: selected_page==currentPage+3}"
            @click="goToPage(1,currentPage+3)">
          {{currentPage+3}}
        </li>
        <li v-if="currentPage+4<length">...</li>
        <li v-if="length>1" :class="{page_selected: selected_page==length}" @click="goToPage(1,length)">{{length}}</li>
      </ul>
      <span class="page_pre_next" style="margin-left: -5px" @click="goToPage(0,3)">></span>
      <input type="number" @keyup.enter="goToPage(2,page_number)" v-model="page_number">
      <!--<button @click="goToPage(0,4)">最后页</button>-->
      <!--<span>{{length}}</span>-->
    </div>
  </div>
</template>

<script>
  export default {
    name: "pagination",
    props: {
      length: {
        type: Number,
        default: 5
      }
    },
    data() {
      return {
        // total: this.length,
        pages: [],
        selected_page: 1,
        currentPage: 1,
        page_number: 1
      }
    },
    watch: {
      page_number(newVal, oldVal) {
        // console.log('newVal', newVal)
        // console.log('oldVal', oldVal)
        if (newVal != '') {
          if (newVal < 1 || newVal > this.length) {
            // console.log(newVal, oldVal);
            this.page_number = oldVal;
          }
        }
      }
    },
    mounted() {
      this.getPage();
    },
    methods: {
      getPage() {
        for (let i = 1; i <= this.length; i++) {
          this.pages.push(i)
        }
      },
      goToPage(type, num) {
        if (type == 0) {
          // if (num == 1) {
          //   if (this.selected_page != 1) {
          //     this.currentPage = 1;
          //     this.selected_page = 1;
          //     this.$emit('go-page', this.selected_page)
          //   }
          // } else
          if (num == 2) {
            if (this.selected_page > 1) {
              this.selected_page--;
              if (this.currentPage > 1) {
                this.currentPage--;
              }
              // console.log('pre', this.currentPage);
              this.$emit('go-page', this.selected_page);
            }
          } else if (num == 3) {
            if (this.selected_page < this.length) {
              this.selected_page++;
              if (this.currentPage < this.length) {
                this.currentPage++;
              }
              // console.log('next', this.currentPage);
              this.$emit('go-page', this.selected_page);
            }
          }
          // else if (num == 4) {
          //   if (this.selected_page < this.length) {
          //     this.currentPage = length;
          //     console.log('last', this.currentPage)
          //     this.selected_page = this.pages.length;
          //     this.$emit('go-page', this.selected_page)
          //   }
          // }
        } else if (type == 1) {
          // console.log(typeof num)
          this.currentPage = num;
          // console.log('this.currentPage', this.currentPage);
          this.selected_page = num;
          this.$emit('go-page', this.selected_page);
        } else {
          // console.log(typeof num);
          if (Number(num) <= this.length && Number(num) >= 1) {
            this.currentPage = Number(num);
            // console.log('this.currentPage', this.currentPage);
            this.selected_page = Number(num);
            this.$emit('go-page', this.selected_page);
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .page_pre_next {
    border: 1px solid rgb(212, 213, 217);
    padding: 0 5px;
    border-radius: 2px;
  }

  .pagenum {
    @extend .page_pre_next;
    margin-right: 5px;
  }

  .page_selected {
    background-color: rgb(37, 117, 236);
  }

  button {
    height: 25px;
    border-radius: 3px;
  }

  ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
    li {
      list-style: none;
      float: left;
      border: 1px solid rgb(212, 213, 217);
      padding: 0 5px;
      border-radius: 2px;
      margin-right: 5px;
      width: 20px;
      text-align: center;
    }
  }

  input {
    width: 40px;
    vertical-align: baseline;
    text-align: center;
    background-color: rgb(231, 231, 231);
    border: none;
    height: 22px;
  }
</style>
